====== Text Inputs ======

The different text input questions are designed for different use cases:

  * The "Text Input" displays one or more text inputs.
    * Each text input may or may not have a label (before and/or after the input).
    * The text inputs may be single- or multi-line inputs. This allows for large input boxes for longer texts. To create a multi-line input, set a height for the text input.
    * The format that is expected for the text may be specified for each text input. To do so, click the text input in the **List of Questions**. This allows, e.g., to accept only numbers.
    * For all inputs of a question, or for single inputs, it's possible to specify an //alternative option// ("no answer"). If enabled, a checkbox will be displayed right of the input.
    * You may specify a constant sum for all inputs of a question, if you're expecting numeric answers. The current sum will then be displayed below the inputs, and the respondent will (optionally) be unable to continue unless the sum matches your expections. This may be useful if, e.g., you want 100% distributed on different categories.
  * "Free Mentions" are optimized to collect ideas or arguments, i.e., a series of similar contents.
    * Compared to a multi-line text input, this has the advantage that each line will be stored in a distinct variable. Further, the number of answers will be counted automatically.
    * By default, the free mentions initially display 2 text inputs. If the respondent enters some text, further inputs will appear.
  * The "Cloze Text" displays text inputs within running text. Each single text input may be formatted like in the "Text Input".
  * The [[::de:create:questions:suggest]] displays a text input (or multiple copies of it) and defines a series of possible responses. As soon as the respondent types few characters, matching responses will be offered. If one of the predefined options is selected, it will be encoded automatically. Optionally, you may allow the respondent to type something different, which will be stored as text.
  * For "Balloon Test", first upload an image in **Images and Media Files**. The question will then display the selected image and text input boxes that you place on the image.


===== JavaScript for Text Inputs =====

SoSci Survey employs JavaScript, for example to limit which characters (digits, letters, etc.) a respondent may use in a text input. Using [[:en:create:javascript|JavaScript]], the behavior of text inputs may be customised further.


==== Allow Formatting Text ====

The JavaScript library [[http://www.sceditor.com/|SCEditor]] (automatically available in SoSci Survey) allows to reconfigure text inputs in a way that respondents can format the text -- like in a word processing software. For example, underline words, add emoticons, etc.

First, create a question of type "text input" and a multi-line (!) text input in this question. To create a multi-line text input, set a height (e.g., 120 pixels) for the input.

Place the question on the appropriate page, using **Compose Questionnaire**.

Then, place an PHP code with the following content on the same page to load the SCEditor:

<code php>
option('script', 'jQuery1.x');
option('script', 'SCEditor'); 
</code>

The next step is to create a new text element at "Text Elements and Labels" (using the ID "jsSCEditor", for example, and type "HTML code") and add the following content:

<code javascript>
<script type="text/javascript">

<!--
$(function() {
  // Replace all textarea's
  // with SCEditor
  $("textarea").sceditor({
    plugins: "xhtml",
    toolbar: "bold,italic,underline",
    emoticonsRoot: "../plugins/SCEditor/",
    style: "../plugins/SCEditor/minified/jquery.sceditor.default.min.css"
  });
});

// -->
</script>
</code>

Place this text element on the same page, below the question. The JavaScript code will allow formatting in all multi-line text inputs (''<textarea>'') in the page. To manipulate a single text input, only, replace ''$("textarea")'' by ''$("#AB01_01")'' in the JavaScript code, whereas "AB01_01" is the ID of the text input.

You can set the available formattings in details. The first address is the line ''toolbar: ...'' in the JavaScript. Check the [[http://www.sceditor.com/documentation/options/|Documentation of SCEditors]] for details.


==== Count/Limit Characters ====

You can easily limit the number of characters per text input, by selecting the input in the **List of Questions**.

With a little JavaScript you may also display the number of characters that the respondent has already written into the text input -- or how many are left to be written. To do so, create a new text element in **Text Elements and Labels** (e.g., using the ID "jsCountChars", type "HTML code"). Paste the following content into the text element.

<code javascript>
<script type="text/javascript">
<!--

function addCounter(textID, displayID, limit) {
  if (limit) {
    limit = parseInt(limit);
  }
  var input = document.getElementById(textID);
  if (!input) {
    alert("No text input with ID " + textID + " found");
    return;
  }
  var display = document.getElementById(displayID);
  if (!display) {
    alert("Found no element with the ID " + displayID);
    return;
  }
  // Function to count and display
  function refresh() {
    var s = input.value.replace(/\r\n/g, "\r").replace(/\r/g, "\n");
    var res = s.length;
    if (limit) {
      res = limit - res;
    }
    // Clear the display tag
    while (display.lastChild) {
      display.removeChild(display.lastChild);
    }
    // Text to display
    var cnt = document.createTextNode(res);
    display.appendChild(cnt);
  }
  // Limit text length, optionally
  if (limit) {
    SoSciTools.checkChars(textID, "", limit);
  }
  // Refresh on every keystroke and other change
  SoSciTools.attachEvent(input, ["change","keyup"], refresh);
  // Refresh when displayed first
  refresh();
}

// Register text input
addCounter("%text%", "%display%", "%limit%");

// -->
</script>
</code>

Now, go to **Compose Questionnaire** and place the text input question on the appropriate page.

Further, you need to place an HTML tag on the page wherever the number of characters shall be displayed. This may be within the question title, in the text input's label or in a text element that you place below the text input question. The HTML element may look like this:

<code html>
(<span id="AB01_01chars">-</span> characters)
</code>

Choose the ID at ''id'' as you like. But it must be unique on the page and must not be the same like an question or item ID (not only ''AB01_01'', for example).

Then place th text element on the page, using the following PHP code -- this must be below the text question, and below the element that contains the HTML tag, eventually.

<code php>
text('jsCountChars', array(
  '%text%' => 'AB01_01',  // Put the text input's ID here
  '%display%' => 'AB01_01chars',  // Put the ID of the HTML tag to display the number of characters here
  '%limit%' => 20  // The number of allowed characters, or 0 to not set any limit
));
</code>

If you have chosen another ID than "jsCountChars" for the text element, please adjust the first line accordingly. Then enter the input's ID, the tag's ID, and the number of allowed characters in the susequent lines.